<!--
 * @Description: 群sop执行详情
 * @LastEditors: shenmengfei
 * @LastEditTime: 2023-01-05 09:55:58
-->
<template>
  <div class="check-wrap">
    <NormalForm pageTitle="执行详情" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset">
      <template slot="more-btn">
        <el-button type="info" plain @click="goBack">返回</el-button>
      </template>
    </NormalForm>
    <div class="g-card mt16 table-card">
      <el-table :data="tableData" v-loading="tableLoading" height="calc(100% - 55px)" :row-style="{ height: '40px' }">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="groupName" label="群聊名称" align="center">
          <template slot-scope="scope">
            <div class="create-by"> {{ scope.row.groupName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="groupLeaderName" label="群主" align="center"></el-table-column>
        <el-table-column prop="sendStatus" label="发送状态" align="center">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.sendStatus === 1">未发送</el-tag>
              <el-tag type="success" v-if="scope.row.sendStatus === 2">发送成功</el-tag>
              <el-tag type="danger" v-if="scope.row.sendStatus === 3">发送失败</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="executeTime" label="执行时间" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        layout="total,sizes,prev,pager,next" :page-sizes="[20, 30, 50]" :total="total" :current-page.sync="queryForm.pageNum" :page-size.sync="queryForm.pageSize" class="table-page"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getExecuteDetail, getGroupLeaderList } from "../../../api/operate/groupSop";

export default {
  data() {
    return {
      queryForm: {
        groupName: '',
        sendStatus: '',
        groupLeaderName: '',
        executeTime: "",
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '群聊名称',
          value: '',
          prop: 'groupName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '发送状态',
          value: '',
          prop: 'sendStatus',
          type: 'SELECT',
          emunName: 'sendTypeList'
        },
        {
          label: '群主',
          value: '',
          prop: 'userIds',
          type: 'SELECT',
          emunName: 'groupLeaderList',
        },
        {
          label: '执行',
          value: '',
          prop: 'executeTime',
          type: 'DATE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      enumOpt: {
        sendTypeList: [],
        groupLeaderList: []
      },
      tableLoading: false,
      tableData: [],
      total: 0,
    }
  },
  mounted() {
    this.init()
    this.handleQuery()
  },
  methods: {
    init() {
      this.getDicts("group_sop_send_status").then((res) => {
        if (res.code === 200) {
          this.enumOpt.sendTypeList = res.data
        }
      });
      const params = {
        taskId: this.$route.query.taskId,
        ruleId: this.$route.query.ruleId
      }
      getGroupLeaderList(params).then(res => {
        this.enumOpt.groupLeaderList = res.data || []
      })
    },
    handleQuery() {
      const params = {
        ...this.queryForm,
        taskId: this.$route.query.taskId,
        ruleId: this.$route.query.ruleId
      }
      this.tableLoading = true
      getExecuteDetail(params).then(res => {
        if (res.code === 200) {
          this.tableLoading = false
          this.tableData = res.rows || []
          this.total = res.total || 0
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleReset() {
      this.queryForm = {
        groupName: '',
        sendStatus: '',
        groupLeaderName: '',
        executeTime: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.handleQuery()
    },
    goBack() {
        this.$router.back()
    },
  },
}
</script>

<style lang='scss' scoped>
@import "@/styles/base.scss";

.wrap {
  @include titleWrap;
}

.check-wrap {
  height: 100%;
  .check-top {
    height: 32px;
    margin: 20px;
    display: flex;

    .btn-right {
        flex: 1;
        text-align: right;
        margin-right: 0;
    }

    .el-input,
    .el-date-editor {
        width: 230px;
    }

    div {
        margin-right: 10px;
    }
  }
  .table-card {
    height: calc(100% - 132px) !important;
    padding: 20px;

    .table-page {
        text-align: right;
        height: 40px;
        margin-top: 15px;
    }

    .create-by {
        color: #082aff;
    }

  }
}

.el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}
</style>
